<template>
	<div :class="[liveInvitationBoxClass]">
		<div class="invitation-list-connect">
			<div v-if="tipTxetBoolen" class="invitation-list-header" @click="clickToggle">
				<p :class="!isEllipsis?'head-tip':''" ref="headTip">{{tipText}}</p>
				<span class="icon-box">
				  <Iconfont v-show="isEllipsis && !isShow" iconClass="iconfont iconspread-line" />
				  <Iconfont v-show="isEllipsis && isShow" iconClass="iconfont iconshouqi-copy" />
				</span>
			</div>
			<div class="tel-box" v-if="isTel">
				<span class="tel-tip">手机号码:</span><input id="zhibo_yaoqingbang_shoujihao" @click="clickTelInput" @blur="blurRu" class="tel-input" type="number" placeholder="请填写手机号" v-model="telNum" ref="inputTel" />
				<div v-if="isRed" class="tel-btn" @click="savePhoneNum">确定</div>
				<div v-else class="tel-btn-gray">确定</div>
			</div>
			<ul v-if='isGRPM'>
				<li>
					<div class="list-left" v-if="personageData.c==0">
						<span class="no-personage">未进入排名</span>
					</div>
					<div class="list-left row-big-box" v-else>
						<p class="rowNo-num">{{personageData.rowNo}}</p>
						<p class="rowNo-pm">我的排名</p>
					</div>
					<div class="list-tx">
						<img onerror="imgError()" :src="wxPic || imgTx" />
					</div>
					<span class="list-niakname">{{nickName || un}}</span>
					<span class="list-text1">邀请</span><span class="list-text2">{{personageData.c}}</span><span class="list-text3">人</span>
					<div class="list-right"></div>
					<div class="cut-off-rule-box"></div>
				</li>
			</ul>
			<ul class="InvitationListArray-box">
				<li v-for="(v,index) in InvitationListArray" :key="index">
					<template v-if="index<3">
						<div class="list-left">
							<img class="list-left list-left-img" :src="imgArray[index]" />
						</div>
						<div class="list-tx">
							<img onerror="imgError()" :src="v.avatar" />
						</div>
					</template>
					<template v-else>
						<div class="list-left">
							{{index+1}}
						</div>
						<div class="list-tx">
							<img onerror="imgError()" :src="v.avatar" />
						</div>
					</template>
					<span class="list-niakname">{{v.nick||v.fromUn}}</span>
					<span class="list-text1">邀请</span><span class="list-text2">{{v.c}}</span><span class="list-text3">人</span>
					<div class="list-right"></div>
					<hr class="line" />
				</li>
			</ul>
			<p class="clickMore" @click="clickMore">{{moreTipText}}</p>
		</div>
	</div>
</template>

<script>
	export default{
		props:{
			noNavLength:String,//noNav  没有nav
			roomInfo:Object,
		},
		data(){
			return{
				liveInvitationBoxClass :'',
				InvitationListArray: [],
				InvitationListNewArray: [],
				imgArray: [
					require('../../../../assets/images/num1.png'),
					require('../../../../assets/images/num2.png'),
					require('../../../../assets/images/num3.png'),
				],
				tipText: "",
				newTipText:"",
				ownerid:this.roomInfo.roomInfo.anchor,
				tipTxetBoolen: false,
				page: 1,
				moreTipText: "",
				isTel: false, //手机box显示不显示
				telNum: '',
				isRed: false,
				personageData: {}, //个人排行数据
				isGRPM:false,
				un:'',
				nickName:'',
				wxPic:'',
				getPlatform: fun.getPlatform(), //app wx
				isShow:false,//邀请说明是否展开
				isEllipsis: false, //邀请说明是否超出一行
			}
		},
		created(){
			if(this.noNavLength == 'noNav'){
				if(this.$channel=='zyzq'&& this.getPlatform == 'app'){
                   this.liveInvitationBoxClass = 'no-nav-zyzq'
				}else{
                   this.liveInvitationBoxClass = 'no-nav'
				}
			}else{
				if(this.$channel=='zyzq'&& this.getPlatform == 'app'){
                    this.liveInvitationBoxClass = 'live-invitation-box-zyzq';
				}else{
                    this.liveInvitationBoxClass = 'live-invitation-box';
				}
				
			};			
			for(let i=0;i<this.roomInfo.tables.length;i++){
				if(this.roomInfo.tables[i].type=='4'){//邀请榜
					if(this.roomInfo.tables[i].openMobile=='1'){//开启
						this.isTel = true;
						this.getTelPhoneNum()
					}else if(this.roomInfo.tables[i].openMobile=='0'){//关闭
						this.isTel = false;
					}
				}
			}
			if(this.$store.state.userInfo.un != undefined && this.$store.state.userInfo.un.length > 0) { //im 消息初始化
				this.un = this.$store.state.userInfo.un;
				this.nickName = this.$store.state.userInfo.nickname;
				this.wxPic = this.$store.state.userInfo.wxpic;
			}
		},
		activated(){
			this.page = 1;
			this.InvitationListArray = [];
			this.InvitationListNewArray = [];
			this.getInvitationList();
		},
		computed:{
			uinfo() {
				return this.$store.state.userInfo;
			},
		},
		watch:{
			uinfo(curVal, oldVal) {
				if(curVal.un != undefined && curVal.un.length > 0) {
                   this.un = this.$store.state.userInfo.un;
				   this.nickName = this.$store.state.userInfo.nickname;
				   this.wxPic = this.$store.state.userInfo.wxpic;
				}
			},
		},
		mounted(){			
		},
			methods: {
			//点击input
			clickTelInput() {
				this.$refs.inputTel.focus()
			},
			blurRu() { //input 失去焦点  解决ios 最新版本6.7.4 input BUG
				setTimeout(function() {
					window.scrollTo(0, 0)
				}, 100)
			},
			// 查询邀请榜手机号
			getTelPhoneNum() {
				this.$http.get('/h5live/getInvitePhone?acct=' + this.ownerid).then((res) => {
					if(res.data.code == '000000') {
						if(res.data.data) { //有手机号码
							this.telNum = res.data.data
							this.isRed = false
						} else {
							this.isRed = true
						}
					}
				}, (err) => {
					console.log(err);
				})
			},
			//更新手机号码
			savePhoneNum() {
				if(this.$store.state.isYk) {
					let jointUrl = fun.getCurPageUrl('live',this.$route.params.roomid)
					fun.ykDisposeFun(jointUrl)
					return
				}
				if(this.telNum.length) {
					this.$http.post('/h5live/saveInvitePhone?phone=' + this.telNum + "&acct=" + this.ownerid).then((res) => {
						if(res.data.code == '000000') { //应该为11位
							this.isRed = false;
							fun.toastMessage('提交成功')
						} else {
							fun.toastMessage('手机号码格式错误')
						}
					}, (err) => {
						console.log(err);
					})
				} else {
					fun.toastMessage('手机号码不能为空')
				}

			},
			getInvitationList() {
				this.$http.get('/h5live/shareInviteRank?roomId=' + this.$route.params.roomid + "&p=" + this.page).then((res) => {
					if(res.data.code == '000000') {
						if(res.data.data.invitaNote) {
							this.tipTxetBoolen = true;
							this.tipText = res.data.data.invitaNote;
							 this.$nextTick(()=>{
                                this.inviteDescription();//邀请说明展示缩放
                            })
						} else {
							this.tipTxetBoolen = false;
						}
						if(!this.$store.state.isYk){//游客不展示 个人信息
								this.isGRPM = true;
								this.personageData = res.data.data.myRank;//个人排名
							}
						this.InvitationListArray = res.data.data.statList; //整个数组
						if(this.InvitationListArray.length >= 10) {
							this.moreTipText = "查看更多分享榜单"
						}
					}
				}, (err) => {
					console.log(err);
				})
			},
			clickMore() {
				this.page++
					let _this = this;
				_this.$http.get('/h5live/shareInviteRank?roomId=' + this.$route.params.roomid + "&p=" + _this.page).then((res) => {
					if(res.data.code == '000000') {
						_this.InvitationListNewArray = res.data.data.statList; //整个数组
						for(var i = 0; i < _this.InvitationListNewArray.length; i++) {
							_this.InvitationListArray.push(_this.InvitationListNewArray[i]);
						}
						if(_this.InvitationListNewArray.length == 0) {
							_this.moreTipText = "没有更多数据"
						}
					}
				}, (err) => {
					console.log(err);
				})
			},
			//邀请说明 展开 收起
			clickToggle(){
				if(this.isEllipsis) {
				let headTip = this.$refs.headTip;
				this.isShow = !this.isShow
				if(this.isShow) {
						headTip.innerHTML = this.tipText
						} else {
						headTip.innerHTML = this.newTipText
				}
				}
			},
			//邀请说明支持缩放,超出一行有三角标识
			inviteDescription() {
				let headTip = this.$refs.headTip;
				let headTipText = headTip.innerHTML; //获取内容
				let currentContentHeight = headTip.clientHeight; //获取内容当前的高度
						if(currentContentHeight > 42) { //1行内容高度
							for(let i = 0; currentContentHeight > 42; i++) {
								headTipText = headTipText.substring(0, headTipText.length - 1);
								headTip.innerHTML = headTipText;
								currentContentHeight = headTip.clientHeight;
							}
							//得到正好符合高度的字符 删除最后一个变为省略号 填充在页面里
						this.newTipText= headTipText.substring(0, headTipText.length-1);
						this.isEllipsis = true
					}
					headTip.innerHTML = this.isEllipsis ? this.newTipText:this.tipText
				},
		}
	}
</script>

<style scoped="scoped">
    ::-webkit-scrollbar {
		display: none; /* Chrome Safari */
		}
	.live-invitation-box{
		/*position: absolute;	*/
		width: 100%;
		height: calc(100vh - 564px);
		background: white;
	}
	.live-invitation-box-zyzq{
         width: 100%;
		height: calc(100vh - 640px);
		background: white;
	}
	.no-nav{
		/*position: absolute;	*/
		width: 100%;
		height: calc(100vh - 494px);
		background: white;
	}
	.no-nav-zyzq{
		width: 100%;
		height: calc(100vh - 570px);
		background: white;
	}
	.live-invitation-box .invitation-list-connect {
		width: 100%;
		height: calc(100vh - 564px);
		overflow: scroll;
	}
	.live-invitation-box-zyzq .invitation-list-connect {
		width: 100%;
		height: calc(100vh - 640px);
		overflow: scroll;
	}
   .no-nav .invitation-list-connect {
		width: 100%;
		height: calc(100vh - 494px);
		overflow: scroll;
	}
	.no-nav-zyzq .invitation-list-connect {
		width: 100%;
		height: calc(100vh - 570px);
		overflow: scroll;
	}

	.invitation-list-connect ul li {
		width: 100%;
		height: 115px;
	}
	.invitation-list-connect ul li span {
		color: #b5b5b5;
		font-size: 28px;
		line-height: 115px;
	}
   	.invitation-list-header {
		position: relative;
	}
	.icon-box{
		position: absolute;
		right: 20px;
		bottom: 14px;
	}
	.invitation-list-header .iconspread-line,.invitation-list-header .iconshouqi-copy{
		font-size: 32px;
		color: #FFFFFF;
    }
	.invitation-list-header p{
		padding: 10px 20px;
		margin-top: 10px;
		font-size: 26px;
		font-weight: 400;
		line-height: 44px;
		color: #FFFFFF;
		background: linear-gradient(180deg, #F93A4A, #F84A4C);
		box-shadow: 0px 4px 8px 1px rgba(255, 0, 18, 0.13);
		border-radius: 0px 15px 15px 0px;
	}
	.head-tip {
	width: fit-content;
	}
     .tel-box {
		margin: 15px 0;
	}
	.tel-tip {
		color: #0C0C0C;
		font-size: 32px;
		margin-left: 30px;
	}
	.tel-input {
		width: 390px;
		height: 60px;
		background: rgba(246, 246, 246, 1);
		border-radius: 10px;
		margin-left: 30px;
		padding-left: 30px;
		font-size: 30px;
		color: #666666;
	}
	.tel-btn {
		width: 100px;
		height: 60px;
		background: rgba(214, 47, 47, 1);
		border-radius: 10px;
		line-height: 60px;
		text-align: center;
		color: white;
		font-size: 30px;
		display: inline-block;
		margin-left: 30px;
	}
	.tel-btn-gray {
		width: 100px;
		height: 60px;
		background: #C5C5C5;
		border-radius: 10px;
		line-height: 60px;
		text-align: center;
		color: #999999;
		font-size: 30px;
		display: inline-block;
		margin-left: 30px;
	}
	.clickMore {
		width: 100%;
		font-size: 30px;
		color: #b5b5b5;
		text-align: center;
		margin: 20px 0 30px;
		line-height: 50px;
	}
   .list-left {
		width: 150px;
		height: 115px;
		line-height: 115px;
		text-align: center;
		font-size: 24px;
		color: #494949;
		float: left;
		background-size: 49px 75px;
		display: flex;
		justify-content: center;
	}

	.list-left-img {
		width: 55px;
		height: 75px;
		border: none;
		background-size: 49px 75px;
		margin: 20px 0 0 0;
	}
    .no-personage {
		color: #D62F2F !important;
		font-size: 26px !important;
	}
	.row-big-box {
		width: 150px;
		display: felx;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		line-height: 20px !important;
	}
	.rowNo-num {
		color: #666666 !important;
		font-size: 36px !important;
		margin-top: 10px;
	}
    .rowNo-pm {
		color: #D62F2F !important;
		font-size: 22px !important;
		margin-top: 20px;
	}
   	.list-tx {
		width: 66px;
		height: 115px;
		display: inline-block;
		float: left;
		border-radius: 50%;
		background-size: 65px 65px;
		position: relative;
	}

	.list-tx img {
		width: 66px;
		height: 66px;
		border-radius: 50%;
		margin-top: 27px;
		background-size: 65px 65px;
	}
   .list-niakname {
		width: 250px;
		height: 115px;
		float: left;
		margin-left: 32px;
		line-height: 115px;
		text-align: left;
		font-size: 28px;
		color: #6b6969 !important;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
   .list-text1 {
		margin-left: 10px;
	}
	.list-text2 {
		width: 90px;
		height: 115px;
		display: inline-block;
		text-align: center;
		color: rgb(204, 53, 56) !important;
	}

	.list-text3 {
		margin: 0 20px 0 5px;
	}
	.list-right {
		width: 17px;
		height: 115px;
		background: url(../../../../assets/images/to_11.png) no-repeat center center;
		float: right;
		margin-right: 22px;
		background-size: 17px 29px;
		animation: ruan 3s linear infinite;
	}
		.cut-off-rule-box {
		width: 100%;
		height: 20px;
		background: rgba(249, 249, 249, 1);
	}
	.InvitationListArray-box {
		margin-top: 25px;
	}
	.line {
		width: 88%;
		background: #e2e2e2!important;
		margin-left: 40px;
		height: 2px;
		border: none;
	}
	@keyframes ruan {
		0% {
			transform: translateY(-10px);
		}
		50% {
			transform: translateY(10px);
		}
		100% {
			transform: translateY(-10px);
		}
	}
	
</style>